<template>
  <div class="container">
    <h1>常用网站导航</h1>
    <div class="card-container">
      <div 
        v-for="site in websites" 
        :key="site.id"
        class="card"
        @click="openWebsite(site.url)"
      >
        <div class="card-header">
          <img :src="site.icon" :alt="site.name + '图标'" class="icon"/>
          <h2>{{ site.name }}</h2>
        </div>
        <p class="description">{{ site.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { ref } from 'vue'

// const websites = ref([
//   {
//     id: 1,
//     name: 'GitHub',
//     description: '代码托管平台',
//     url: 'https://github.com',
//     icon: 'https://github.githubassets.com/favicons/favicon.svg'
//   },
//   {
//     id: 2,
//     name: 'Vue 官网',
//     description: 'Vue 官方文档',
//     url: 'https://vuejs.org',
//     icon: 'https://vuejs.org/logo.svg'
//   },
//   {
//     id: 3,
//     name: 'MDN Web Docs',
//     description: 'Web 开发文档',
//     url: 'https://developer.mozilla.org',
//     icon: 'https://developer.mozilla.org/favicon-48x48.png'
//   },
//   // 可以继续添加更多网站...
// ])
import { ref, onMounted } from 'vue'

// 定义响应式数据
const websites = ref([])
const loading = ref(true)

// 加载 JSON 数据
const loadWebsites = async () => {
  try {
    const response = await fetch('./websites.json')
    if (!response.ok) {
      throw new Error('网络响应异常')
    }
    websites.value = await response.json()
  } catch (error) {
    console.error('加载数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadWebsites()
})

const openWebsite = (url) => {
  window.open(url, '_blank')
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.card {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #eee;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.icon {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
}

h2 {
  font-size: 1.25rem;
  color: #34495e;
  margin: 0;
}

.description {
  color: #7f8c8d;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}
</style>